<template>
    <div>
        <p>用户<input type="text" v-model="username"></p>
        <p>密码<input type="password" v-model="password"></p>
        <p><input type="button" value="登录" @click="login()"></p>
        <p><input type="button" value="有token访问" @click="yes_token()"></p>
        <p><input type="button" value="游客登录" @click="no_token()"></p>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name:"jwt_login",
    data(){
        return{
            username:"",
            password:"",
        }
    },
    methods: {
        login(){
            var form_data = new FormData()
            form_data.append("username",this.username)
            form_data.append("password",this.password)
            axios({
                url:"api/users/v1/login/",
                method:"post",
                data:form_data
            }).then(res=>{
                console.log(res.data)
                sessionStorage.setItem("jwt_token",res.data.token)

                console.log("jwt_token",sessionStorage.getItem("jwt_token"))
                this.$router.push({path:"/jwtshow"})
            })
        },
        yes_token(){
            axios({
                url:"api/users/v1/tokens/",
                method:"get",
                headers:{
                    "Authorization":"JWT "+ sessionStorage.getItem("jwt_token")
                }
            }).then(res=>{
                console.log(res.data)
                this.$router.push({path:"jwtshow/"})
            })
        },
        no_token(){
            axios({
                url:"api/users/v1/notoken/",
                method:"get",
            }).then(res=>{
                console.log(res.data)
                alert("请先登录")
            })
        }
    },
}
</script>

<style>

</style>
